<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <style>
        /* 我们想使用拼合图像 ("img_navsprites.gif")，以创建一个导航列表。 */
        /* 我们将使用一个HTML列表，因为它可以链接，同时还支持背景图像： */

        /* #navlist{position:relative;} 
        - 位置设置相对定位，让里面的绝对定位 */
        #navlist {
            position: relative;
        }

        /* #navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;} 
        - margin和padding设置为0，列表样式被删除，所有列表项是绝对定位 */
        #navlist li {
            margin: 0;
            padding: 0;
            list-style: none;
            position: absolute;
            top: 0;
        }

        /* #navlist li, #navlist a{height:44px;display:block;} 
        - 所有图像的高度是44px */
        #navlist li,
        #navlist a {
            height: 44px;
            display: block;
        }

        /* #home{left:0px;width:46px;} 
        - 定位到最左边的方式，以及图像的宽度是46px */
        #home {
            left: 0px;
            width: 46px;
        }

        /* #home{background:url(img_navsprites.gif) 0 0;} 
        - 定义背景图像和它的位置（左0px，顶部0px） */
        #home {
            background: url('images/img_navsprites.gif') 0 0;
        }

        /* prev{left:63px;width:43px;} 
        - 右侧定位63px（＃home宽46px+项目之间的一些多余的空间），宽度为43px。 */
        #prev {
            left: 63px;
            width: 43px;
        }

        /* #prev{background:url('img_navsprites.gif') -47px 0;} 
        - 定义背景图像右侧47px（＃home宽46px+分隔线的1px） */
        #prev {
            background: url('images/img_navsprites.gif') -47px 0;
        }

        /* #next{left:129px;width:43px;}
        - 右边定位129px(#prev 63px + #prev宽是43px + 剩余的空间), 宽度是43px. */
        #next {
            left: 129px;
            width: 43px;
        }

        /* #next{background:url('img_navsprites.gif') no-repeat -91px 0;} 
        - 定义背景图像右边91px（＃home 46px+1px的分割线+＃prev宽43px+1px的分隔线） */
        #next {
            background: url('images/img_navsprites.gif') -91px 0;
        }
    </style>
</head>

<body>
    <ul id="navlist">
        <li id="home"><a href="/"></a></li>
        <li id="prev"><a href="/css/"></a></li>
        <li id="next"><a href="/css/"></a></li>
    </ul>
</body>

</html>